﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link th:href="@{/front-resource/css/style.css}" href="../static/front-resource/css/style.css" type="text/css" rel="stylesheet" />
  <!-- Favicon -->
  <!-- Favicon and Touch Icons -->
  <link th:href="@{/front-resource/images/favicon.png}" href="../static/front-resource/images/favicon.png" rel="shortcut icon" type="image/png">
  <link th:href="@{/front-resource/images/apple-touch-icon.png}" href="../static/front-resource/images/apple-touch-icon.png" rel="apple-touch-icon">
  <link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" href="../static/front-resource/images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
  <link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" href="../static/front-resource/images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
  <link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" href="../static/front-resource/images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
  <title>注册</title>
</head>

<body>
  <!-- Start Main Menu Area -->
  <div th:replace="/common/frontCommon::header"></div>
  <!-- End Main Menu Area -->

  <div class="container-fluid px-3 register">
    <div class="row min-vh-100">
      <div class="col-md-8 col-lg-6 col-xl-5 d-flex align-items-center">
        <div class="w-100 py-5 px-md-5 px-xl-6 position-relative">
          <div class="mb-4">
            <h2>忘记密码</h2>
            <p class="text-muted">请根据注册时的邮箱收到的验证码进行验证</p>
          </div>
          <form class="form-validate" name="form1" action="/login/forget" method="post" onsubmit="return checkpost()">
            <div class="form-group">
              <input type="email" path="email" name="userEmail" id="userEmail" placeholder="输入注册时的邮箱" class="form-control"  data-msg="Please enter your email" required="">
              <p></p>
            </div>
            <div class="form-group">
              <input id="checkCode" type="text" name="checkCode" placeholder="请输入邮箱收到的验证码" class=" col-md-7">
              <button id="sendCheckCode" type="button" class="btn btn-warning col-md-4" left>获取验证码</button>
            </div>
            <div class="form-group">
              <input name="password" id="password" placeholder="新的密码" type="password" required=""
                     data-msg="Please enter your password" class="form-control">
            </div>
            <div class="form-group mb-4">
              <input name="password2" id="password2" placeholder="再次输入密码" type="password" required=""
                     class="form-control">
            </div>
            <button type="submit" class="btn btn-lg btn-block btn-primary">提交</button>
            <hr class="my-4">
            <p class="text-center"><small class="text-muted text-center">已经有账户了? <a th:href="@{/login/login1}">登录</a></small></p>
          </form>
        </div>
      </div>
      <div class="col-md-4 col-lg-6 col-xl-7 d-none d-md-block">
        <!-- Image-->
        <div th:style="'background-image:url('+ '/front-resource/images/register.jpg' +');'" style="background-image: url(../static/front-resource/images/register.jpg);" class="bg-cover h-100 mr-n3"></div>
      </div>
    </div>
  </div>
  <div th:replace="/common/frontCommon::footer"></div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
  <script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
  <script
    src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRSEJH8Z2UVyyaAv0TD7MY-IgclK5Izm8&amp;libraries=places&amp;callback=initAutocomplete"></script>
  <script th:src="@{/front-resource/js/map_infobox.js}"></script>
  <script th:src="@{/front-resource/js/markerclusterer.js}"></script>
  <script th:src="@{/front-resource/js/maps.js}"></script>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
  <script th:src="@{/layui/layui.js}"></script>
  <script>
    $(function () {
      var userEmail_reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      $("input").blur(function() {
        var ele = $(this);
        var getValue = ele.val();//获取创建用户时输入的文本信息
        if ($(this).is("#userEmail")) {
          if(userEmail_reg.test(getValue)){
            ele.attr("style", "color:green;border:1px solid green");
          }else {
            ele.attr("style", "color:red");
            ele.next().attr("style", "color:red").html("&nbsp;&nbsp;邮箱不合法！请重新输入！");
          }
        }
      });

      $("#checkCode").blur(function () {
        if($(this).val()==""){
          $(this).val("请获取验证码");
          $("#checkCode").css("color","red");
          $("#checkCode").css("border","1px solid red");
        }else if($(this).val()=="请获取验证码"){
          $(this).val("");
          $("#checkCode").css("color","#222222");
          $("#checkCode").css("border","1px solid #ededed");
        }else {
          $("#checkCode").css("color","#222222");
          $("#checkCode").css("border","1px solid #ededed");
        }
      });
      $("#checkCode").focus(function () {
        if($(this).val()=="请获取验证码"){
          $(this).val("");
        }
      });
    });

    var checkCode = "";

      layui.use("form",function () {
          var $ = layui.$;
          //验证码
          $("#sendCheckCode").click(function () {
              var email = $("#userEmail").val();
              if (email == null || email == ""){
                  layer.msg("请输入邮箱！！！");
                  return;
              }
              var index = layer.open({
                  type:3,
                  content:"邮件发送中..."
              });
              $.ajax({
                  url:"/login/getCheckCode?email="+email,
                  type:"get",
                  success:function (text) {
                      if (text != null && text != ""){
                          layer.close(index);
                          layer.msg("已发送");
                          checkCode = text;
                          countDown();
                      } else{
                          layer.alert("获取失败，请重新获取")
                      }
                  }
              });
          });
          var maxTime = 60;
          function countDown(){
              if (maxTime == 0){
                  checkCode = "";
                  $("#sendCheckCode").removeClass("layui-btn-disabled");
                  $("#sendCheckCode").removeAttr("disabled")
                  $("#sendCheckCode").html("获取验证码");
                  maxTime = 60;
              }else{
                  $("#sendCheckCode").attr("disabled","disabled");
                  $("#sendCheckCode").addClass("layui-btn-disabled");
                  form.render();
                  $("#sendCheckCode").html(maxTime+"秒后重新获取");
                  maxTime--;
                  setTimeout(countDown,1000);
              }
          }
      });


    function checkpost() {
        var userEmail=$("#userEmail").val();
        var password=$("#password").val();

      if (form1.password.value == null) {
        alert("请输入密码");
        form1.password.focus();
        return false;
      } else {
        if (form1.password.value.length < 6) {
          alert("密码长度需大于等于6字符");
          form1.password.focus();
          return false;
        } else {
          if (form1.password.value.length > 30) {
            alert("密码长度需小于于30字符");
            form1.password.focus();
            return false;
          }
        }
      }

      if (form1.password2.value == null) {
        alert("请再次输入密码");
        form1.password2.focus();
        return false;
      }

      if (document.form1.password.value !== document.form1.password2.value) {
        alert("您两次输入的密码不一样！请重新输入.");
        document.form1.password2.focus();
        return false;
      }

        var inputCheckCode = $("#checkCode").val();
      if(checkCode==""){
          layer.alert("请获取验证码");
          return false;
      }
      else if (inputCheckCode == checkCode){
          $("#checkCode").css("color","red");
          $("#checkCode").css("border","1px solid red");
            $.ajax({
                url:"/login/forget",
                type:"POST",
                data:{
                    userEmail:userEmail,
                    password:password
                },
                async:false,
                success:function (text) {
                    if ("ok" == text){
                        layer.alert("重置密码成功",function () {
                            window.location.href = "/login/toLogin";
                        });
                    }else if("error"==text){
                        layer.alert("重置失败",function () {
                            window.location.href = "/login/toForget";
                        });
                    }else if("notFoundUser"==text){
                      layer.alert("用户不存在");
                    }
                }
            });
        } else{
            layer.msg("验证码输入错误");
            $("#checkCode").css("color","red");
            $("#checkCode").css("border","1px solid red");
        }
        return false;

    }


  </script>
</body>

</html>